<template>
    <div id="myMain">
        <div class="myMain-padding displayFlexC">
            <div class="tenAccountList-top main-top">
                <vxe-button @click="exportDataEvent"><i class="vxe-icon--download"></i> 导出</vxe-button>
            </div>
            <div class="tenAccountList-top">
                <span style="float:left;line-height:40px;margin-right:10px;">全表搜索：</span>
                <el-input v-model="searchVal" placeholder="" @input="searchEvents" prefix-icon="el-icon-search"></el-input>
            </div>
            <vxe-table
            ref="xTable"
            :filter-config="{showIcon: false}"
            border
            stripe
            highlight-hover-row
            :loading="loading"
            :data="tableData"
            :export-config="{}"
            @checkbox-all="selectAllEvent"
            @checkbox-change="selectChangeEvent"
            row-id="id"
            :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}"
            :checkbox-config="{reserve: true}">
            <vxe-table-column type="checkbox" width="60"></vxe-table-column>
            <vxe-table-column type="seq" title="序号" width="100"></vxe-table-column>
            <vxe-table-colgroup title="企业名称">
                <vxe-table-column field="fname" :filters="[{data: ''}]" :filter-method="customStringFilterMethod" width="250">
                    <template #header="{ column }">
                        <vxe-input type="text" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @change="filterEvent(option)" placeholder="请输入" clearable prefix-icon="el-icon-search"></vxe-input>
                    </template>
                </vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="企业法人">
                <vxe-table-column field="corp" :filters="[{data: ''}]" :filter-method="customStringFilterMethod" width="250">
                    <template #header="{ column }">
                        <vxe-input type="text" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @change="filterEvent(option)" placeholder="请输入" clearable prefix-icon="el-icon-search"></vxe-input>
                    </template>
                </vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-colgroup title="联系电话">
                <vxe-table-column field="phone" :filters="[{data: ''}]" :filter-method="customStringFilterMethod" width="250">
                    <template #header="{ column }">
                        <vxe-input type="text" v-for="(option, index) in column.filters" :key="index" v-model="option.data" @change="filterEvent(option)" placeholder="请输入" clearable prefix-icon="el-icon-search"></vxe-input>
                    </template>
                </vxe-table-column>
            </vxe-table-colgroup>
            <vxe-table-column field="time" title="发起时间"></vxe-table-column>
            <vxe-table-column field="timeLimit" title="处理期限"></vxe-table-column>
            <vxe-table-column field="leaseStatus" title="处理状态">
                <template #default="{ row }">
                       <span v-if="row.leaseStatus == '同意'" style="color:green;">{{ row.leaseStatus }}</span>
                       <span v-else-if="row.leaseStatus == '不同意'" style="color:red;">{{ row.leaseStatus}}</span>
                       <span v-else>{{ row.leaseStatus}}</span>
                </template>
            </vxe-table-column>
            <vxe-table-column title="操作" width="100">
                <template #default="{ row }">
                    <vxe-button type="text" icon="el-icon-bangzhu" title="审批" @click="toApproval(row)" class="my_success_btn" v-if="row.leaseStatus == '未审批'"></vxe-button>
                </template>
            </vxe-table-column>
            </vxe-table>
            <!-- 分页 -->
            <vxe-pager
            perfect
            size="mini"
            :current-page="tablePage.currentPage"
            :page-size="tablePage.pageSize"
            :page-sizes="tablePage.pageSizes"
            :total="tablePage.totalResult"
            @page-change="pageChange"
            :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']">
            </vxe-pager>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import '../../../styles/all';
::v-deep.vxe-form .vxe-form--item:last-of-type{
  margin: 0 auto;
display: flow-root;
}
#myMain{
    .tenAccountList-top{
        margin-bottom: 20px;
        .vxe-button{
            margin-left: 10px;
        }
    }
}
</style>
<script>
import { getRentRefundApprovalInfo } from '@/api/enterprise_Manage'
import XEUtils from 'xe-utils'
export default {
    props: {
    },
    components:{},
    data(){
        return{
            searchVal: '',
            loading: false,
            tableData: [],
            list: [
                { id: 10001, a: '企业退租', b: '张建强', c: '2021-06-01', d: '李建', e:'2021-06-01', f:'2021-12-01', g:'未处理'},
                { id: 10001, a: '企业退租', b: '张建强', c: '2021-06-01', d: '李建', e:'2021-06-01', f:'2021-12-01', g:'未处理'},
            ],
            // 分页
            tablePage: {
                currentPage: 1,
                pageSize: 15,
                pageSizes: [15, 30, 45, 60],
                totalResult: 0
            },
            checkedBoxList: [],
            IsRentRefund: true
        }
    },
    methods:{
        // 根据页切换
        pageChange(val){
            console.log('page val', val)
            this.tablePage.currentPage = val.currentPage
            let page = val.currentPage
            let limit = val.pageSize
            this.init(page, limit)
        },
        // 初始化
        init(page, limit){
            let result = []
            getRentRefundApprovalInfo(page, limit, 1).then(res => {
                console.log('退租审批信息', res)
                result = JSON.parse(JSON.stringify(res.data))
                this.tablePage.totalResult = res.count
                result.forEach(ele => {
                    if(ele['leaseStatus'] == 1){
                        ele['leaseStatus'] = '未审批'
                    }else if(ele['leaseStatus'] == 2){
                        ele['leaseStatus'] = '同意'
                    }else{
                        ele['leaseStatus'] = '不同意'
                    }
                })
                this.list = result
                this.tableData = result
                
            })
        },
        selectAllEvent ({ checked, records }) {
            this.checkedBoxList = records
            // 全选
            console.log(checked ? '所有勾选事件' : '所有取消事件', records)
        },
        selectChangeEvent ({ checked, records }) {
            this.checkedBoxList = records
            // 单选个
            console.log(checked ? '勾选事件' : '取消事件', records)
        },
        // 导出
        exportDataEvent () {
            this.$refs.xTable.openExport({
                // 默认勾选源
                original: true
            })
        },
        // 搜索
        searchEvents () {
            console.log(this.searchVal)
            const filterVal = XEUtils.toValueString(this.searchVal).trim().toLowerCase()
            const filterRE = new RegExp(filterVal, 'gi')
            const searchProps = ['fname', 'corp', 'phone', 'time', 'leaseStatus', 'timeLimit']
            const rest = this.list.filter(item => searchProps.some(key => XEUtils.toValueString(item[key]).toLowerCase().indexOf(filterVal) > -1))
            this.tableData = rest.map(row => {
                const item = Object.assign({}, row)
                searchProps.forEach(key => {
                item[key] = XEUtils.toValueString(item[key]).replace(filterRE, match => `${match}`)
                })
                return item
            })
        },
        // 表内查找
        customStringFilterMethod ({ option, row, column }) {
            if (option.data) {
            return XEUtils.toValueString(row[column.property]).toLowerCase().indexOf((option.data).toLowerCase()) > -1
            }
            return true
        },
        filterEvent (option) {
            const xTable = this.$refs.xTable
            // 设置为选中状态
            option.checked = true
            // 修改条件之后，需要手动调用 updateData 处理表格数据
            xTable.updateData()
        },
        // 审核
        toApproval(data){ 
            this.$router.push({path: '/enterpriseManage/RentRefund_Approval_son', query: {data: data, IsRentRefund: this.IsRentRefund}})
            // this.$confirm('是否审批该条信息？', '', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning'
            // }).then(() => {
                
            // })
        }
    },
    created(){},
    mounted(){
        this.init(this.tablePage.currentPage, this.tablePage.pageSize)
    },
}
</script>